<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>北京站智能网格化管理系统</title>
    <link rel="stylesheet" type="text/css" href="../lib/css/common.css">
    <link rel="stylesheet" href="../lib/css/iconFont/iconfont.css">
    <!-- <link rel="stylesheet" type="text/css" href="./resource/css/count.css"> -->
    <link rel="stylesheet" href="../lib/css/pagination.css">
    <!-- <link rel="stylesheet" type="text/css" href="./resource/css/station.css"> -->
    <link rel="stylesheet" type="text/css" href="../lib/css/jquery.datetimepicker.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/select2.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/loading.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/newcount.css">
    <style type="text/css">
    .block.lds-css{
        display: block;
    }
    .lds-css{
        background-color: transparent
    }
    </style>
</head>
<body>
<div class="wraper">
    <div class="searchwrap">
        <!-- 日期时间 -->
        <div class="searchelm searchtime1 none">
            <input type="text" id="datetimepicker" class="search_control" name="ptime_start">
            <input type="text" id="datetimepicker2" class="search_control" name="ptime_end">
            <div class="select2_wrap" style="min-width:20%;max-width:60%;">
                <select name="wxdep" id="wxdep" class="search_control wxdep" style="width:100%">
                </select>
            </div>
            <input type="button" value="查询" id="lookUp1" class="lookUp"/>
        </div>
        <!-- 月季年 -->
        <div class="searchelm searchtime2">
            <select name="" class="select_option select_option0 select_option3" id="select_year">
                <option value="1" class="option_year">年</option>
                <option value="2" class="option_quart">季</option>
                <option value="3" class="option_month">月</option>
            </select>
            <select name="" class="select_option" id="select_month">
                <!-- <option value="">2017</option> -->
            </select>
            <select name="" class="select_option select_quarter3" id="select_quarter">
                <!-- <option value=""></option> -->
            </select>
            <input type="button" value="查询" id="lookUp2" class="lookUp" />
        </div> 
        <!-- 图表切换 -->
        <div class="tabbar clearfix">
            <ul class="tab">
              <li class="tab_li tab_li_click"><i class="icon iconfont icon-tubiao"></i>图形</li>
              <li class="tab_li"><i class="icon iconfont icon-biaoge"></i>表格</li>
              <li class="tab_li"><i class="icon iconfont icon-daochu"></i>导出</li>
          </ul>
        </div>   
    </div>
    <div class="count_classifyall">
        <div class="count_classify up">
        </div>
        <!-- 点击查看更多 -->
        <div class="more">
            <a href="" class="more_a down_img"><img src="../lib/img/count/down.png" alt="" class="more_img down1"><img src="../lib/img/count/down1.png" alt="" class="more_img down2 none"></a>
        </div>      
    </div>
    <!-- 图表 表格 -->
    <div class="main_content clsall">
        <!-- 各网格内设备故障统计 -->
        <div class="mcharts nan" id="chart" style="width:100%;height:100%;"></div>
        <!-- 人员表格 -->
        <div class="station_shaow_detail nan" style="display:none">
            <table class="station_shaow_detail_table ">
                <caption style="font-size: 2.4rem;">各网格内设备故障统计</caption>
            </table>
            <div class="M-box1" style="font-size:10px;text-align:center;" id="page_string">
            </div>
        </div>
        <div class="lds-css block">
            <div class="lds-dual-ring">
                <div></div>
            </div>
        </div>
    </div>
</div>
</body>
<!-- <script type="text/javascript" src="/assets/js/jquery.1.10.1.js"></script> -->
<script type="text/javascript" src="../lib/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../lib/js/base.js"></script>
<script type="text/javascript" src="../lib/js/echarts.js"></script>
<script type="text/javascript" src="../lib/js/datetimepicker.js"></script>
<script type="text/javascript" src="../lib/js/jquery.pagination.js"></script>
<script type="text/javascript" src="../lib/js/select2.full.min.js"></script>
<script type="text/javascript" src="../lib/js/count.js" type="text/javascript"></script>
<script type="text/javascript">
var page = 1
var chart=echarts.init(document.getElementById("chart"));
//查询
$("#lookUp2").click(function () {
    //统计表
    var type = $("#select_year option:selected").val();
    var year = $("#select_month option:selected").val();
    var quarter = $("#select_quarter option:selected").val();
    var chk_value =[];
    $('input[name="checkbox"]:checked').each(function(){
        chk_value.push($(this).val());
    });
    if(chk_value.length==0)
    {
      return alert('你还没有选择任何内容！');
    }
    var _data = {
        type:type,
        year:year,
        month:'',
        quarter:'',
        grids:chk_value
    }

    if(type == '1'){
        //year
        _data.month = ''
        _data.quarter = ''

    }else if(type == '2'){
        //quarter
        _data.month = ''
        _data.quarter = quarter
    }else if(type == '3'){
        //month
        _data.month = quarter
        _data.quarter = ''
    }

    deviceGridRepairChart(_data)
});
$("#lookUp1").click(function () {
    var _data = {
        'page':page,
        'start':$('#datetimepicker').val(),
        'end':$('#datetimepicker2').val(),
        'departments': $('#wxdep').val()
        // 'time':<?php echo time();?>,
    };
    deviceGridRepairTable(_data)
});
//统计图
function deviceGridRepairChart(data){
    //统计图
    var _data = data
    $('.lds-css').addClass('block')
    $.ajax({
        url: serverUrl.base+serverUrl.count+'device_trouble_chart',
        type:"POST",
        data: _data,
        dataType:"json",
        success: function (res) {
            // 根据数据库取到结果拼接现在结果
            $('.lds-css').removeClass('block')
            var _data = res.data
            _data.title = '各网格内设备故障统计'
            _data.legend=['设备总数','损坏次数']
            refreshChart(_data);
        }
    });
}
//表格
function deviceGridRepairTable(data){
    var _data = data
    $('.lds-css').addClass('block')
    $.ajax({
        url: serverUrl.base+serverUrl.count+'device_trouble_table',
        type:"POST",
        data: _data,
        dataType:"json",
        success: function (res) {
            // 根据数据库取到结果拼接现在结果
            $('.lds-css').removeClass('block')
            var _data = res.data
            $('.station_shaow_detail_table').createTable({data:_data,columns:[
                {name:'序号',field:'',ids:1,w:'4rem'},
                {name:'网格名',field:'grid_name',w:'4rem'},
                {name:'设备名称',field:'device_name',w:'10rem'},
                {name:'设备类型',field:'device_type_name',w:'10rem'},
                {name:'设备管理部门',field:'department_name',w:'8rem'},
                {name:'网格内设备总数',field:'device_num',w:'8rem'},
                {name:'现场上报次数',field:'report_num',w:'8rem'},
                {name:'维修次数',field:'repair_num',w:'8rem'}
            ]})
            $("#page_string").html(res.result_page);
            
        }
    });
}
//统计图 样式
function refreshChart(data){
    var _data=data
    chart.setOption({
    title:{
      text:_data.title,
      x:"center",
      y:"20px",
      textStyle:{
        color:"#fff",
        fontSize:30
      }
    },
    tooltip:{
      trigger:"axis",
      axisPointer:{
        type:"shadow"
      },
    },
    legend:{
      data:_data.legend,//标记名
      right:"10%",
      y:"15%",
      textStyle:{
        color:"#fff",
        fontSize:16,
        
      }
    },
    toolbox: {
        show: true,
        feature: {
            saveAsImage: {
                show:true,
                excludeComponents :['toolbox'],
                pixelRatio: 2
            }
        }
    },
    grid:{
        left:'14%',
        right:'10%',
        bootom:"3%",
        top:"30%",
        vontainLabel:true
    },
    xAxis:{
      type:"category",
      data:_data.chartxname,
      axisLabel:{
        show:true,
        textStyle:{
          color:"#fff"
        }
      }
    },
    yAxis:{
      type:"value",
      axisLabel:{
        show:true,
        textStyle:{
          color:"#fff"
        }
      }
    },
    toolbox: {
        show: true,
        feature: {
            saveAsImage: {
                show:true,
                excludeComponents :['toolbox'],
                pixelRatio: 2,
                left:"right"
            }
        }
    },
    series:[
      {
        name:_data.legend[0],
        type:"bar",
        barGap: 0,
        // barWidth:"34%",
        // stack:"总量",
        // barCategoryGap:"50%",
        itemStyle:{
          normal:{
            color:"tomato",
            // barBorderColor:"tomato",
            // barBorderWidth:6,
            // barBorderRadius:0,
            label:{
            show:false,
            // position:"insidetop"
          }
          }
        },
        data:_data.chartxdata[0]
      },{
        name:_data.legend[1],
        type:"bar",
        // stack:"总量",
        itemStyle:{
          normal:{
            color:"#fff",
            // barBorderColor:"tomato",
            // barBorderWidth:6,
            // barBorderRadius:0,
            label:{
              show:false,
              // postion:"top"
            },
            textStyle:{
              color:"tomato"
            }
          }
        },
        data:_data.chartxdata[1]
      }
    ]
  })
}
function common_request(elm){
    if(arguments[0]){
        page = arguments[0]
    }else{
        page = 1
    }
    $("#lookUp2").click()
    $("#lookUp1").click()     
}
//
chkInit(serverUrl.base+serverUrl.grid+'grid_choice_list',function(){time()})
//查询
function search_(){
    page = 1 ;
    common_request(1);  
}
//tab初始化
$('.tab .tab_li').each(function(index,elm){
    //console.log(index,elm)
    $(this).data('val',index)
})
//图表切换后的操作
$('.tab_li').on('click',function(elm){
    var $this = $(this)
    var _ids = $this.data('rel')?$this.data('rel'):$this.index()
    if(_ids== '0'){
        $('.searchtime1').hide()
        $('.searchtime2').show()
        $(".count_classifyall").show();
        $('.main_content').addClass('clsall')
        $(".educe").removeClass("addli")
    }else if(_ids== '1'){
        $('.searchtime1').show()
        $('.searchtime2').hide()
        $('.main_content').removeClass('clsall')
        $(".count_classifyall").hide();
        $(".educe").addClass("addli");
    }else if(_ids== '2'){
        var _data = {
            'page':page,
            'start':$('#datetimepicker').val(),
            'end':$('#datetimepicker2').val(),
            'departments': $('#wxdep').val()
            // 'time':<?php echo time();?>,
        };
        var _url=serverUrl.base + serverUrl.countD + 'device_trouble_table?start='+encodeURIComponent(_data.start)+'&end='+encodeURIComponent(_data.end)+'&departments='+(encodeURIComponent(_data.departments) == 'null'?'':encodeURIComponent(_data.departments))
        window.location.href = _url;return;
        // $.post(serverUrl.base+serverUrl.countD+'device_trouble_table',_data,function(res){
        //     return 
        // })
    }
})
$('.wxdep').rpSelect({url:serverUrl.base+serverUrl.count+serverUrl.dep,multiple:true,placeholder:'请选择设备管理部门'})
</script>
</html>

